<template>
	<div class="article_container">
		<!-- 导航栏 -->
		<van-nav-bar title="文章详情" left-text="返回" left-arrow @click-left="$router.back()" />
		<loading-page v-if="loading"></loading-page>
		<!-- 文章详情 -->
		<template v-else-if="article.title">
			<div class="main-wrap">
				<div class="article-detail">
					<!-- 文章标题 -->
						<h3 class="article-title">{{article.title}}</h3>
						<!-- 用户信息 -->
						<article-auth :article="article"></article-auth>
						<!-- 文章内容 -->
						<div 
						class="article-content markdown-body" 
						v-html="formatImg(article.content)"
						ref="article-content"
						></div>
						<van-divider>正文结束</van-divider>
						<!-- 文章评论列表 -->
						<comment-list 
							:art_id="articleId" 
							v-model="articleComment"
							:total-count.sync = "commentCount"
							@click-reply = "handleReplyShow"
							></comment-list>
							
				</div>
			</div>
		</template>
		
		<error-page v-else @btn-click="_getArticleById"></error-page>
		
		<!-- 底部区域 -->
		<div class="article-bottom">
			<van-button 
				class="comment-btn" 
				type="default" 
				round 
				size="small"
				@click="isPostCommentShow = true"
				>写评论</van-button>
			<van-icon name="comment-o" :badge="commentCount" color="#777" />
			<van-icon 
				:color="this.article.is_collected?'orange':'#777'" 
				:name="this.article.is_collected?'star':'star-o'" 
				@click="handleCollection"
				/>
			<van-icon
				:color="this.article.attitude===1?'orange':'#777'" 
				:name="this.article.attitude===1?'good-job':'good-job-o'" 
				@click="handleGoodjob"
				/>
			<van-icon name="share" color="#777777"></van-icon>
		</div>
		<!-- 评论回复 -->
		<van-popup 
			v-model="isPostCommentShow"
			get-container="body"
			position="bottom"
		>
			<comment-post 
				:articleId="articleId" 
				@post-commented="handlePostComment"
				
			/>
		</van-popup>
		<!-- 回复评论 -->
		<van-popup
			
		    get-container="body"
			position="bottom"
			:style="{height:'95%'}"
			v-model="isShowReply"
		>
			<comment-reply
				v-if="isShowReply"
				:articleId="articleId" 
				:comment="replyComments"
				@close-click="isShowReply=false"
			></comment-reply>
		</van-popup>
	</div>
</template>

<script>
	import {getArticleById} from '@/api/article.js'
	import {collected,uncollected,like,unlike} from '@/api/user.js'
	import { ImagePreview } from 'vant'
	
	import loadingPage from '@/components/loading-page/loading-page.vue'
	import errorPage from '@/components/error-page/error-page.vue'
	
	import articleAuth from './articleCmp/article-auth.vue'
	import commentList from './articleCmp/commentList.vue'
	import commentPost from './articleCmp/comment-post.vue'
	import commentReply from './articleCmp/comment-reply.vue'
	export default {
		name: "articleDetail",
		props: {
			articleId: {
				// 传入的可能是字符串或数字
				style: [String, Number],
				required: true
			}
		},
		created(){
			this._getArticleById()
		},
		data() {
			return {
				article:{},
				loading:false,
				isPostCommentShow:false,
				articleComment:[],
				isShowReply:false,
				commentCount:0,
				replyComments:{}
				
			}
		},
		components:{
			loadingPage,
			errorPage,
			articleAuth,
			commentList,
			commentPost,
			commentReply
		},
		methods:{
			async _getArticleById(){
				this.loading=true
				try{
					const {data} = await getArticleById(this.articleId)
					this.article = data.data
					setTimeout(()=>{
						this.addImagePreview()
					},0)
				}catch(err){
					console.log(err)
				}
				this.loading=false
			},
			addImagePreview(){
				// 获取所有图片节点
				const imgs = this.$refs['article-content'].querySelectorAll('img')
				
				// 获取图片路径
				const imgPaths = Array.from(imgs).map(img=>img.src)
				
				imgs.forEach((item,index)=>{
					
					item.addEventListener('click',()=>ImagePreview({
						images:imgPaths,
						startPosition: 1,
						closeable: true,
					}))
				})
				
			},
			async handleCollection(){
				 // 这里 loading 不仅仅是为了交互提示，更重要的是请求期间禁用背景点击功能，防止用户不断的操作界面发出请求
				  this.$toast.loading({
				    duration: 0, // 持续展示 toast
				    message: '操作中...',
				    forbidClick: true // 是否禁止背景点击
				  })
				  try{
					  if(this.article.is_collected){
					  	await uncollected(this.article.art_id)
					  	this.$toast.success('取消收藏')
					  }else{
					  	await collected(this.article.art_id)
					  	this.$toast.success('收藏成功')
					  }
					 
					  this.article.is_collected = !this.article.is_collected
				  }catch(err){
					  this.$toast.fail('操作失败')
				  }
				
			},
			async handleGoodjob(){
				this.$toast.loading({
					duration:0,
					message:'操作中...',
					forbidClick:true
				})
				try{
					if(this.article.attitude===1){
						await unlike(this.article.art_id)
						this.article.attitude = -1
						this.$toast.success('取消点赞')
					}else{
						await like(this.article.art_id)
						this.article.attitude = 1
						this.$toast.success('已点赞')
					}
					
				}catch(err){
					this.$toast.fail('操作失败')
				}
			},
			handlePostComment(obj){
				this.articleComment.unshift(obj)
				// 更新视图
				this.commentCount++
				this.isPostCommentShow = false
			},
			handleReplyShow(comment){
				// 对评论进行回复 那么弹出回复目标的弹出层
				this.isShowReply = true
				this.replyComments = comment
			},
			formatImg(val){
				const reg = new RegExp('data-original-','gi')
				return val.replace(reg,'')
			}
		},
		computed:{
			
		}
	}
</script>

<style scoped lang="less">
	
	.article_container{
		
		.main-wrap{
			position: fixed;
			left: 0;
			right: 0;
			top: 46px;
			bottom: 44px;
			overflow-y: scroll;
			background-color: #fff;
		}
		.article-title {
		      font-size: 20px;
		      padding: 25px 16px;
		      margin: 0;
		      color: #3a3a3a;
		    }
		.article-detail{
			
			
			.article-content{
				padding:25px 15px;
				
			}
		}
		.article-bottom{
			position:fixed;
			bottom:0;
			left: 0;
			right: 0;
			display:flex;
			justify-content: space-around;
			align-items:center;
			height:44px;
			border-top: 1px solid #d8d8d8;
			background-color: #fff;
			box-sizing:border-box;
			.coment-btn{
				width:140px;
				height:23px;
				border: 1px solid #eeeeee;
				font-size: 15px;
				line-height: 23px;
				color: #a7a7a7;
			}
			.van-icon {
			    font-size: 20px;
			    .van-info {
			      font-size: 11px;
			      background-color: #e22829;
			    }
			}
		}
	}
</style>
